<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <template v-for="item in amountList">
        <el-col :span="6" :xs="24" :sm="12" :lg="6">
          <countCard v-bind="item"></countCard>
        </el-col>
      </template>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7" :xs="24" :sm="24" :md="11" :lg="7">
        <chartCard header="分类商品数量(饼图)">
          <pieEchart :data="showgoodsCateGoryCount"></pieEchart>
        </chartCard>
      </el-col>
      <el-col :span="10" :xs="24" :sm="24" :md="13" :lg="10">
        <chartCard header="全国销量地图">
          <mapEchart :map-data="showGoodsAddressSale"></mapEchart>
        </chartCard>
      </el-col>
      <el-col :span="7" :xs="24" :sm="24" :md="24" :lg="7">
        <chartCard header="分类商品数量(玫瑰图)">
          <roseEchart :data="showgoodsCateGoryCount"></roseEchart>
        </chartCard>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12">
        <chartCard header="分类商品销量">
          <lineEchart v-bind="showgoodsCateGorySale"></lineEchart>
        </chartCard>
      </el-col>
      <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12">
        <chartCard header="分类商品收藏数量">
          <barEchart v-bind="showgoodsCateGoryFavor"></barEchart>
        </chartCard>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="dashboard">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'

import countCard from './child-cpns/count-card.vue'
import chartCard from './child-cpns/chart-card.vue'
import pieEchart from '@/components/pageEchart/src/pie-echart.vue'
import lineEchart from '@/components/pageEchart/src/line-echart.vue'
import roseEchart from '@/components/pageEchart/src/rose-echart.vue'
import barEchart from '@/components/pageEchart/src/bar-echart.vue'
import mapEchart from '@/components/pageEchart/src/map-echart.vue'

import useAnalsys from '@/store/main/analysis/alalysis'

const analysisStore = useAnalsys()
const { amountList, goodsCateGoryCount, goodsCategorySale, goodsCategoryFavor, goodsAddressSale } =
  storeToRefs(analysisStore)
analysisStore.fetchAnalysisDataAcation()

const showgoodsCateGoryCount = computed(() => {
  return goodsCateGoryToData(goodsCateGoryCount)
})

const showgoodsCateGorySale = computed(() => {
  const labels = goodsCategorySale.value.map((item) => {
    return item.name
  })
  const values = goodsCategorySale.value.map((item) => {
    return item.goodsCount
  })
  return { labels, values }
})
const showgoodsCateGoryFavor = computed(() => {
  const labels = goodsCategoryFavor.value.map((item) => {
    return item.name
  })
  const values = goodsCategoryFavor.value.map((item) => {
    return item.goodsFavor
  })
  return { labels, values }
})

const showGoodsAddressSale = computed(() => {
  return goodsAddressSale.value.map((item) => {
    return { name: item.address, value: item.count }
  })
})

function goodsCateGoryToData(data: any) {
  return data.value.map((item: any) => {
    return { name: item.name, value: item.goodsCount }
  })
}
</script>

<style scoped>
.el-row {
  margin-bottom: 10px;
}
.el-col {
  margin-bottom: 10px;
}
</style>
